<template>
  <div>
    <el-row :gutter="1">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="11">
          <el-form-item label="数据块" prop="data">
            <el-input v-model="formData.data" type="textarea" placeholder="请输入数据块"
                      :autosize="{minRows: 15, maxRows: 20}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="数据类型" prop="dataType">
            <el-radio-group v-model="formData.dataType" size="medium">
              <el-radio v-for="(item, index) in dataTypeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="上传">
            <el-upload
              ref="upload"
              :loading="loading"
              :limit="1"
              :before-upload="beforeUpload"
              :file-list="field116fileList"
              :auto-upload="true"
              :headers="headers"
              :on-success="handleSuccess"
              action=""
              :http-request="uploadFileHandle"
            >
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="标题名" prop="excelTableName">
            <el-input v-model="formData.excelTableName" placeholder="请输入标题名" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="表头" prop="excelHead">
            <el-input v-model="formData.excelHead" placeholder="请输入表头" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="是否画图" prop="hasGraph">
            <el-radio-group v-model="formData.hasGraph" size="medium">
              <el-radio v-for="(item, index) in hasGraphOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图形类别" prop="graphType">
            <el-radio-group v-model="formData.graphType" size="medium">
              <el-radio v-for="(item, index) in graphTypeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图形标题" prop="graphTitle">
            <el-input v-model="formData.graphTitle" placeholder="请输入图形标题" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图标题位置" prop="graphTitleLocation">
            <el-input v-model="formData.graphTitleLocation" placeholder="请输入图标题位置" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="横坐标" prop="axisKey">
            <el-select v-model="formData.axisKey" placeholder="请选择横坐标" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in axisKeyOptions" :key="index" :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="统计列" prop="showColumnKey">
            <el-select v-model="formData.showColumnKey" placeholder="请选择统计列" multiple clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in showColumnKeyOptions" :key="index" :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="数图间隔" prop="dataGraphDistance">
            <el-input v-model="formData.dataGraphDistance" placeholder="请输入数图间隔" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图数间隔" prop="graphDataDistance">
            <el-input v-model="formData.graphDataDistance" placeholder="请输入图数间隔" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图开始行" prop="graphStartRowNum">
            <el-input v-model="formData.graphStartRowNum" placeholder="请输入图开始行" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图结束行" prop="graphEndRowNum">
            <el-input v-model="formData.graphEndRowNum" placeholder="请输入图结束行" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图开始列" prop="graphStartColumnNum">
            <el-input v-model="formData.graphStartColumnNum" placeholder="请输入图开始列" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="图结束列" prop="graphEndColumnNum">
            <el-input v-model="formData.graphEndColumnNum" placeholder="请输入图结束列" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    import {getToken} from '@/utils/auth'
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {parseTime, downloadFile} from '@/utils/index'
    import {getDataFromExcel, generateExcelFromPageConfig} from '@/api/code-tools'
    import {downloadFileFunction} from '@/api/downloadFile'
    export default {
        components: {},
        props: [],
        data() {
            return {
                loading: false,
                formData: {
                    data: '',
                    dataType: 3,
                    excelTableName: '分析数据',
                    excelHead: '',
                    hasGraph: true,
                    graphType: 1,
                    graphTitle: '分析数据展示图',
                    graphTitleLocation: '',
                    showColumnKey: '',
                    axisKey: '',
                    dataGraphDistance: 2,
                    graphDataDistance: 2,
                    graphStartRowNum: 0,
                    graphEndRowNum: 0,
                    graphStartColumnNum: 0,
                    graphEndColumnNum: 10,
                },
                rules: {
                    data: [{
                        required: true,
                        message: '请输入数据块',
                        trigger: 'blur'
                    }],
                    dataType: [{
                        required: true,
                        message: '单选框组不能为空',
                        trigger: 'change'
                    }],
                    excelTableName: [{
                        required: true,
                        message: '请输入标题名',
                        trigger: 'blur'
                    }],
                    excelHead: [{
                        required: true,
                        message: '请输入表头',
                        trigger: 'blur'
                    }],
                    hasGraph: [{
                        required: true,
                        message: '是否画图不能为空',
                        trigger: 'change'
                    }],
                    graphType: [{
                        required: true,
                        message: '图形类别不能为空',
                        trigger: 'change'
                    }],
                    graphTitle: [{
                        required: true,
                        message: '请输入图形标题',
                        trigger: 'blur'
                    }],
                    graphTitleLocation: [{
                        required: true,
                        message: '请输入图标题位置',
                        trigger: 'blur'
                    }],
                    showColumnKey: [{
                        required: true,
                        message: '请选择统计列',
                        trigger: 'change'
                    }],
                    axisKey: [{
                        required: true,
                        message: '请选择横坐标',
                        trigger: 'change'
                    }],
                    dataGraphDistance: [{
                        required: true,
                        message: '请输入数图间隔',
                        trigger: 'blur'
                    }],
                    graphDataDistance: [{
                        required: true,
                        message: '请输入图数间隔',
                        trigger: 'blur'
                    }],
                    graphStartRowNum: [{
                        required: true,
                        message: '请输入图开始行',
                        trigger: 'blur'
                    }],
                    graphEndRowNum: [{
                        required: true,
                        message: '请输入图结束行',
                        trigger: 'blur'
                    }],
                    graphStartColumnNum: [{
                        required: true,
                        message: '请输入图开始列',
                        trigger: 'blur'
                    }],
                    graphEndColumnNum: [{
                        required: true,
                        message: '请输入图结束列',
                        trigger: 'blur'
                    }],
                },
                field116fileList: [],
                dataTypeOptions: [{
                    "label": "json",
                    "value": 1
                }, {
                    "label": "文本",
                    "value": 2
                }, {
                    "label": "文件上传",
                    "value": 3
                }],
                hasGraphOptions: [{
                    "label": "是",
                    "value": true
                }, {
                    "label": "否",
                    "value": false
                }],
                graphTypeOptions: [{
                    "label": "柱状",
                    "value": 1
                }, {
                    "label": "折线",
                    "value": 2
                }],
                showColumnKeyOptions: [],
                axisKeyOptions: [],
                headers: {'Authorization': 'Bearer ' + getToken()}
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        methods: {
            parseTime,
            checkPermission,
            beforeUpload(file) {
                let isLt2M = true
                isLt2M = file.size / 1024 / 1024 < 100
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 100MB!')
                }
                this.loading = false
                return isLt2M
            },
            handleSuccess(response, file, fileList) {
                this.$refs.upload.clearFiles()
                //this.bodyContainer = response
                //this.$refs.upload.clearFiles()
                //this.resetForm()
            },
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    let params = {
                        data: JSON.parse(this.formData.data),
                        dataType: this.formData.dataType,
                        excelTableName: this.formData.excelTableName,
                        excelHead: this.formData.excelHead,
                        hasGraph: this.formData.hasGraph,
                        graphType: this.formData.graphType,
                        graphTitle: this.formData.graphTitle,
                        graphTitleLocation: this.formData.graphTitleLocation,
                        showColumnKey: this.formData.showColumnKey.join(","),
                        axisKey: this.formData.axisKey,
                        dataGraphDistance: this.formData.dataGraphDistance,
                        graphDataDistance: this.formData.graphDataDistance,
                        graphStartRowNum: this.formData.graphStartRowNum,
                        graphEndRowNum: this.formData.graphEndRowNum,
                        graphStartColumnNum: this.formData.graphStartColumnNum,
                        graphEndColumnNum: this.formData.graphEndColumnNum
                    };
                    let outputFileName = `配置生成的excel图表` + `结果.xlsx`;
                    generateExcelFromPageConfig(params).then(res => {
                        downloadFileFunction(res, outputFileName);
                        this.$notify({
                            title: '文件处理成功',
                            type: 'success',
                            duration: 2500
                        })
                    }).catch(err => {
                        console.log(err);
                    });

                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
            uploadFileHandle(item) {
                this.loading = true;
                let ttFile = item.file;
                const form = new FormData();
                // 文件对象
                form.append('file', ttFile);
                let fileName = ttFile.name;
                getDataFromExcel(form).then(res => {
                    console.log(res.data)
                    this.formData.data = JSON.stringify(res.data.parseData);
                    const columnKeyList = res.data.parseTableHeadList;
                    this.showColumnKeyOptions = columnKeyList;
                    console.log(this.showColumnKeyOptions);
                    this.axisKeyOptions = columnKeyList;
                    this.formData.excelHead = res.data.tableHeadString;
                    console.log(this.formData.graphStartRowNum);
                    console.log(this.formData.dataGraphDistance);
                    const dataEndLineNum = res.data.dataEndLineNum;
                    this.formData.graphTitleLocation = dataEndLineNum + this.formData.dataGraphDistance;
                    this.formData.graphStartRowNum = dataEndLineNum + this.formData.dataGraphDistance + 1;
                    this.formData.graphEndRowNum = this.formData.graphStartRowNum + 25;
                    this.formData.axisKey = this.axisKeyOptions[0]
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
